<template>
    <div class="home">
        <div class="background" v-if="orderListView">
            <ol class="list_con">
                <li class="item_con" v-for="(item,i) in orderList">
                    <div class="top">
                          <div class="top_left">订单编号:{{item.orderNo}}</div>
                          <div class="top_right">已付订金</div>
                    </div>
                    <div class="bottom">
                        <div class="itemWarp">
                            <div class="label">下单卖场：</div>
                            <div class="textInfo">{{item.placeName}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">下单门店：</div>
                            <div class="textInfo">{{item.shopName}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">价格有效期：</div>
                            <div class="textInfo_red">{{item.expireTime}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">订单金额：</div>
                            <div class="textInfo_red"><span>¥</span>{{item.depositAmount}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">下单时间：</div>
                            <div class="textInfo">{{item.orderTime}}</div>
                        </div>
                    </div>
                </li>
            </ol>
        </div>
        <infinite-loading @infinite="getOrderList" v-if="orderListView">
            <span slot="no-more" style="color:#ccc">
                已无更多订单！
            </span>
        </infinite-loading>
        <div class="noSign" v-if="!orderListView">
            <div>
                <div class="pic">
                    <img src="../../assets/img/defultPage/no_order_data.png">
                </div>
                <div class="noSignTxt">
                    您还没有任何订单呢
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import api from "@/api/index";
    import { Toast } from 'mint-ui';
    import axios from 'axios';
    export default {
        name: "order",
        components: {
            InfiniteLoading
        },
        created() {

        },
        methods: {
            getOrderList($state){
                console.log('!!!!')
                let param={
                    token:this.token,
                    orderStage:1,
                    pageSize:this.pageSize,
                    page:this.page,
                    isH5:1
                }
                api.orderList(param).then(res => {
                    if (res.msgCode == "000") {
                        this.page++;
                        if(res.data.length==0){
                            if($state){
                                $state.loaded();
                                $state.complete();
                            }
                            this.orderListView=false;
                            return
                        }else {
                            this.orderListView=true;
                        }
                        this.orderList=this.orderList.concat(res.data)
                        if($state){
                            $state.loaded();
                            if(res.data){
                                if (res.data.length < this.pageSize) {
                                    $state.complete();
                                }
                            }else {
                                $state.complete();
                            }
                        }
                    } else {
                        Toast({
                            message: '网络错误',
                            position: 'middle',
                            duration: 5000
                        });
                    }
                });
            }
        },
        data() {
            return {
                pageSize:5,
                page:1,
                orderList:[],
                token: localStorage.getItem("Token"),
                orderListView:true
            };
        },
    };
</script>
<style scoped>
    .noSign{
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        flex-wrap: wrap;
    }
    .noSign .pic{
        width: 160px;
        height: 160px;
        vertical-align: middle;
    }
    .noSign .noSignTxt{
        font-size: 14px;
        text-align: center;
        padding-top: 5px;
        color: #999999;
    }
    .background{
        margin-left: 16px;
        margin-right: 16px;
        padding-bottom: 10px;
    }
    .list_con .item_con{
        margin-top: 10px;
        box-shadow: 0px 2px 8px 0px rgba(31, 28, 92, 0.05);
        padding: 12px 16px;
    }
    .top{
        font-size: 14px;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-bottom: 7px;
        line-height: 1.5;
        border-bottom: 1px solid #eee;
        flex-wrap: nowrap;
        display: flex;
    }
    .top_left{
        font-size:12px ;
        flex: 1;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .top_right{
        font-size:13px ;
        font-weight: bolder;
    }
    .infinite-loading-container{
        font-size: 13px;
        padding: 10px;
    }
    .bottom{
        width: auto;
        margin-top:5.5px ;
    }
    .bottom .itemWarp{
        display: -webkit-box;
        -webkit-box-align: center;
        padding: 5px 0;
        color: #333;
        font-size: 12px;
    }
    .bottom .itemWarp .textInfo{
        -webkit-box-flex: 1;
        padding-left: 8px;
        text-align: right;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .textInfo_red{
        -webkit-box-flex: 1;
        padding-left: 8px;
        text-align: right;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #f73657;
    }
</style>